<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="txt">
        <hr>
       收集的数据： <div>{{txt}}</div>
       <button @click="change">改变</button>
       <hr>
       <form @submit.prevent="toSend">
        姓名：<input type="text" v-model="formObj.username">
        <hr>
        性别： 男：<input name="sex" value="男" v-model="formObj.sex" type="radio"> 女：<input value="女" type="radio" name="sex"
        v-model="formObj.sex" >
        <hr>
        爱好：
          吃 <input type="checkbox" value="chi" v-model="formObj.chi">
          睡 <input type="checkbox" value="shui" v-model="formObj.shui" >
          玩 <input type="checkbox" value="wan"  v-model="formObj.wan">
        <hr>
        省份：<select v-model="formObj.province">
          <option value="hei">黑龙江</option>
          <option value="ji">吉林</option>
          <option value="liao">辽宁</option>
        </select>
        <hr>
        备注： <textarea v-model="formObj.remark" name="" id="" cols="30" rows="10">

        </textarea>
        颜色：<input type="color" v-model="formObj.color">
        日期： <input type="date" v-model="formObj.date">
        <hr>
        <input type="submit" >

       </form>
    </div>
    <script src="./vue.js"> </script>
    <!-- v-model是vue的双向绑定指令 可以直接通过视图改变数据，数据可以直接改变视图
    vue的双向绑定原理是：通过object.defineproperty()来完成的，他有get和set方法 完成 set 赋值拦截数据的变化，get负责赋值数据的变化，最终去触发页面的响应
    -->
    <script>
      new Vue({
        el:"#app",
        data(){
          return{
            txt:"",
           
            formObj:{
              username:"",
              sex:"",
              chi:"",
              shui:"",
              wan:"",
              province:"",
              remark:"",
              color:"",
              date:""
            }
          }
        },
        methods: {
          change(){ //数据也会改变视图
            this.txt="数据改变了视图"
          },
          toSend(){
            console.log(this.formObj)
          }
        },
      })
    </script>
</body>
</html>